04 Exibindo o progresso

  upload() {
    const description = this.photoForm.get('description').value;
    const allowComments = this.photoForm.get('allowComments').value;
    this.photoService
      .upload(description, allowComments, this.file)
      .subscribe((event: HttpEvent<any>) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.alertService.success('Upload complete', true);
          this.router.navigate(['/user', this.userService.getUserName()]);
        }
      });
  }

      <div *ngIf="!percentDone; else percent" >
        <button 
            [disabled]="photoForm.invalid" 
            type="submit" 
            class="btn btn-primary btn-block">
            Upload
        </button>
        <a [routerLink]="['']" class="btn btn-secondary btn-block">Cancel</a>
      </div>

      <ng-template #percent>
        <div class="text-center display-4" *ngIf="percentDone">
          uploading {{ percentDone }}%
        </div>
      </ng-template>